<template>
	<view class="container">
		<view class="tip">为保障您的账号安全，修改密码前请填写原密码</view>
		<view class="before">
			<view class="title">原密码</view>
			<input type="password" placeholder="请输入原密码" v-model="word.oldPassword">
		</view>
		<view class="after">
			<view class="title">设置密码</view>
			<input type="password" placeholder="请输入登录密码" v-model="aginWord">
			<input type="password" placeholder="请再次输入登录密码" v-model="word.password">
		</view>
		<view class="btn" @click="submit">确定</view>
	</view>
</template>

<script>
	import {
		loading,
		loaded,
		tip,
		tip3
	} from '../../../utils/tip.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				word: {
					username: '',
					password: '',
					oldPassword: ''
				},
				aginWord: ''
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {
			this.word.username = this.userInfo.username
		},
		methods: {
			submit() {
				if (this.word.password != this.aginWord) {
					tip({title: '两次密码不一致'})
					return
				}
				this.$service.common.modifyPwd(this.word).then(async (res) => {
					await tip({title: '修改成功'})
					uni.navigateTo({
						url: '/pagesC/my/setting/index'
					})
				}).catch((err) => {
					tip({title: '原' + err})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.tip {
			padding: 28rpx 24rpx 16rpx 24rpx;
			font-size: 20rpx;
			color: #999999;
		}
		.before, .after {		
			margin-bottom: 24rpx;
			view {				
				font-size: 20rpx;
				font-weight: bold;
				padding: 0 24rpx;
				padding-bottom: 12rpx;
			}
			input {
				background-color: white;
				height: 96rpx;
				font-size: 28rpx;
				padding: 0 24rpx;
			}		
		}
		.after :nth-child(2) {
			border-bottom: 2rpx solid #F2F2F2;
		}
		.btn {
			width: 342rpx;
			height: 72rpx;
			border-radius: 42rpx;
			background-color: $main-color;
			position: fixed;
			bottom: 96rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
			text-align: center;
			line-height: 72rpx;
			color: white;
			font-size: 28rpx;
		}
	}
</style>
